<template>
  <div class="home">monitor</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUpdated, onUnmounted } from 'vue'

interface Book {
  title: string;
  author: string;
  year: number;
}
export default defineComponent({
  name: 'hello world',
  props: {},
  data () {
    return {
      book: {
        title: 'Vue 3 Guide',
        author: 'Vue Team',
        year: 2020
      } as Book
    }
  },
  setup () {
    onMounted(() => {
      console.log('onMounted')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })

    return {}
  }
})
</script>
